<form class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input name="goodsName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">供应商</label>
            <div class="layui-input-inline">

                <select name="supplier.id">
                    <option value="">请选择</option>
                    <!--<c:forEach items="${suppliers}" var="s">-->
                        <!--<option value="${s.id}">${s.name}</option>-->
                    <!--</c:forEach>-->
                    <option th:each="s:${suppliers}" th:value="${s.id}" th:text="${s.name}"></option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">是否付款</label>
            <div class="layui-input-inline">
                <select name="status">
                    <option value="">请选择</option>
                    <option value="0">未付款</option>
                    <option value="1">已付款</option>
                </select>
            </div>
            <button class="layui-btn" lay-filter="demo1" lay-submit="">查询</button>
        </div>

    </div>
</form>
<table id="billTable" lay-filter="billTable">
</table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript" th:inline="none">
    //layui use只能出现一次
    layui.use(['table', 'form', 'layer'], function () {
        var form=layui.form;
        form.render();//重新渲染表单，否则后追加到页面中的元素不生效
        var table = layui.table;//获取表格插件
        var layer = layui.layer;
        //使用插件渲染表格
        table.render({
            id: 'billTable',
            elem: '#billTable',//页面中表格元素的id
            page:true,
            url: 'bill.html?act=table',//后台controller中的地址  @RequestMapping
            cols: [[
                {type: 'checkbox'},
                {field: 'id', title: 'ID'},
                {field: 'goodsName', title: '商品名'},
                {field: 'amount', title: '数量'},
                {field: 'status', title: '状态'},
                {field: 'createdTime', title: '创建时间'},
                {title: '操作', toolbar: '#barDemo'}
            ]]
        })
        form.on('submit(demo1)', function (data) {
            //刷新表格数据 ajax
            table.reload('billTable', {
                where: data.field
            })
            return false;//阻止表单提交,页面不跳转
        });
        //tool中的demo，指的是表格的lay-filter
        table.on('tool(billTable)', function (obj) {
            var data = obj.data;//被点击的行的数据
            if (obj.event === 'del') {//event是按钮的lay-event值
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    title: "编辑数据",
                    type: 1,
                    area: ['500px', '300px'],
                    content: $("#edit-layer").html(), //这里content是一个普通的String
                    btn: ['提交', '取消']
                    , yes: function (index, layero) {//yes 默认是第一个按钮
                        $.ajax({
                            url:"table.html?act=update",
                            method:"post",
                            data:$("#user-form").serialize(),
                            success:function(json){
                                if(json=="ok"){
                                    table.reload("billTable",{});//刷新表格
                                    layer.close(index) ;//index是当前弹出层的唯一标识
                                }
                            }
                        })
                    }
                    , btn2: function (index, layero) {//btnX 其中X是一个数字，表示第几个按钮

                        layer.close(index) ;//index是当前弹出层的唯一标识
                    }, success: function(layero, index){//弹出层打开之后执行的操作
                        form.val("user-form", {//表单赋值
                            "name": data.name // "name": "value"
                            ,"email":data.email
                            ,"id":data.id
                        })
                    }
                });

            }
        });
    })
</script>
<script type="text/html" id="edit-layer">
    <form class="layui-form" style="width: 80%" lay-filter="user-form" id="user-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</script>
